<html><head>
    <title>在线测试</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <script src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
  

    <script src="bootstrap/js/bootstrap.js" ></script>
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" >

    <script>
var init={'questions':[
{'question':'jQuery是什么？','answers':['JavaScript库','CSS库','PHP框架','以上都不是'],'correctAnswer':1},
{'question':'找出不同类的一项?','answers':['写字台','沙发','电视','桌布'],'correctAnswer':3}]};

    </script>
    <style>
      .ok{
        color: #1296db;
    
      }
      .ok1{
        background-color: #1296db;
      }
      .error{
        color: #d81e06;
      }

    .modal.fade.in{
        top:125px;  
    }
    .modal-footer {
    padding: 15px;
    text-align: center;
    border-top: 1px solid #e5e5e5;
}
.tag{
  display: flex;
    color: #fff;
    background-color: #000;
    border-radius: 50%;
    width: 24px;
    justify-content: center;

}
.list-group-item1 {
    position: relative;
    display: block;
    padding: 10px 15px;
    margin-bottom: -1px;
    background-color: #fff;
}
</style>
   
  </head>
  <body>
  
    <div class="container" style="padding-top: 10px;">
        <div class="jumbotron" >
            <h1 class="display-6">用户信息：xxxx</h1>
            <p class="lead">关于XXXXXXXX答题</p>
          </div>
        <div>

            <div class="row">
                
                <div class="col">
                    <div class="card">
                        <div class="card-body" id="questions-list">
                          This is some text within a card body.
                        
                        </div>
                      </div>
                    <div class="d-flex justify-content-center" style="margin-top: 10px;">
                        <button type="button" id="button" class="btn btn-primary">下一题</button>
                </div>

              </div>
          </div>


      </div>


  

</div>
<div class="modal" tabindex="-1" role="dialog" id="myModal">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">考试成绩</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <p id="result-list"></p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>

        </div>
      </div>
    </div>
  </div>

  </body>
  <script src="js/init.js"></script>
  <script>
    $.ajax({
        type: "post",
        url: 'http://app.jlrbyy.cn/app/aqswer/getQAInfoList?qaId=2',
         dataType: "json",
         success: function (json) { 
      
            init=json
            console.log(init)
            var array=['A','B','C','D','E','F']
            var str=''
            for(var j in init.questions)
            {
                var _p=1
                str+='<div id="qlist'+(parseInt(j)+1)+'" style="display:none">'
            
                str+='<div>'+init.questions[j].question+'</div>'

            
                str+='<div id="pagelist">'+(parseInt(j)+1)+'/'+init.questions.length+'</div>'
                str+='<ul class="list-group">'
                for(var p in init.questions[j].answers)
                {  
                 str+='<li class="list-group-item" style="display:flex"><input type="radio" name="option'+(parseInt(j)+1)+'" class="form-check-input"'
            
            
                 if(init.questions[j].correctAnswer==_p)
                 {
                    str+='value="'+init.questions[j].correctAnswer+'" '
            
                 }
                 str+='><span class="tag">'+array[p]+'</span>.'+init.questions[j].answers[p]+'</li>'   
                 _p++
                }
                str+="</ul>"
                str+="</div>"
            }
            
            $('#questions-list').html(str)
            $('.lead').html(json.content)
            $('.display-6').html(json.title)
            $('#qlist1').show()



         },
         error: function (err) {
             console.log(err)
         },
     
     });
  </script>





  <script>
    var userid=getUrlParam('userid')
   if(userid==null)
   {
    userid=0
    alert('请登录')

   }
    $(":radio").hide()

    $('#qlist1').show()
  var flag=1
  var pages=1

  var result_e=0
  var result_s=0
  $('#questions-list').on('click','li', function(e) {

    if(flag==1){
      
         flag=0
        $(this).find('input[type="radio"]').prop('checked', true);
        var myvalue = $('input:radio[name="option'+pages+'"]:checked').val();
        console.log(myvalue)
        if(myvalue=='on')
        {
           
          $(this).append('&nbsp;&nbsp;<svg t="1689647316061" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5527" width="16" height="16"><path d="M827.392 195.584q65.536 65.536 97.792 147.456t32.256 167.936-32.256 167.936-97.792 147.456-147.456 98.304-167.936 32.768-168.448-32.768-147.968-98.304-98.304-147.456-32.768-167.936 32.768-167.936 98.304-147.456 147.968-97.792 168.448-32.256 167.936 32.256 147.456 97.792zM720.896 715.776q21.504-21.504 18.944-49.152t-24.064-49.152l-107.52-107.52 107.52-107.52q21.504-21.504 24.064-49.152t-18.944-49.152-51.712-21.504-51.712 21.504l-107.52 106.496-104.448-104.448q-21.504-20.48-49.152-23.04t-49.152 17.92q-21.504 21.504-21.504 52.224t21.504 52.224l104.448 104.448-104.448 104.448q-21.504 21.504-21.504 51.712t21.504 51.712 49.152 18.944 49.152-24.064l104.448-104.448 107.52 107.52q21.504 21.504 51.712 21.504t51.712-21.504z" p-id="5528" fill="#d81e06"></path></svg>')
          $(this).addClass('error')
          $(this).children('.tag').attr('style','background-color:#d81e06')
          $("input[name='option"+pages+"'][value='"+init.questions[pages-1].correctAnswer+"']").next('.tag').attr('style','background-color:#1296db')
          $("input[name='option"+pages+"'][value='"+init.questions[pages-1].correctAnswer+"']").parent().attr("style",'color:#1296db;display:flex')
          $("input[name='option"+pages+"'][value='"+init.questions[pages-1].correctAnswer+"']").parent().append('&nbsp;&nbsp;<svg t="1689647302805" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4492" width="16" height="16"><path d="M512 1024C229.248 1024 0 794.752 0 512S229.248 0 512 0s512 229.248 512 512-229.248 512-512 512z m-114.176-310.954667a53.333333 53.333333 0 0 0 75.434667 0l323.328-323.328a53.333333 53.333333 0 1 0-75.434667-75.434666l-287.914667 283.306666-128.853333-128.853333a53.333333 53.333333 0 1 0-75.434667 75.434667l168.874667 168.874666z" fill="#1296db" p-id="4493"></path></svg>')
          result_e++
        }
        else{
          $(this).append('&nbsp;&nbsp;<svg t="1689647302805" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4492" width="16" height="16"><path d="M512 1024C229.248 1024 0 794.752 0 512S229.248 0 512 0s512 229.248 512 512-229.248 512-512 512z m-114.176-310.954667a53.333333 53.333333 0 0 0 75.434667 0l323.328-323.328a53.333333 53.333333 0 1 0-75.434667-75.434666l-287.914667 283.306666-128.853333-128.853333a53.333333 53.333333 0 1 0-75.434667 75.434667l168.874667 168.874666z" fill="#1296db" p-id="4493"></path></svg>')
          $(this).addClass('ok')
          $(this).children('.tag').attr('style','background-color:#1296db')
          result_s++
        }
      $('input:radio[name="option'+pages+'"]').prop('disabled','disabled')
      }
  });
  

$("#button").click(function(){
  console.log(init.questions.length)
  console.log(flag)
  if(pages<init.questions.length){
    if(flag==1){
    alert('选择')
    $(".alert").alert()
  }
  else{
    flag=1
    $('#qlist'+pages).hide();
    pages++
    $('#qlist'+pages).show();

  }
  }
  else{
    $('#button').hide()
    $("#myModal").modal({
        backdrop:"static",
        keyboard: false
    });

  $.ajax({
        type: "post",
        url: 'http://app.jlrbyy.cn/app/aqswer/sendQAResult?userId='+userid+'&result='+result_s+'&qaId=2',
         dataType: "json",
         success: function (json) { 
            console.log(json)
         },
         error: function (err) {
             console.log(err)
         },
     
     });
    $('#result-list').html('正确'+result_s+"|错误"+result_e)
  }

})
function getUrlParam(name) {
    const urlParams = new URLSearchParams(window.location.search);
    return urlParams.get(name);
  }
  </script>

  </html>  
